<template>
	<view class="fp-main ">
		<view class="c-title f-lg-title text-bold">忘记密码?</view>
		<view class="f-paragraph c-title-desc pt-sm">找回您的密码</view>
		<view class="fp-list">
			<view class="fp-item pl-lg pr-lg fill-body radius-16 flex-between mb-md">
				<text class="c-title f-min-title item-title">{{rule[0].regText}}</text>
				<input type="text" class="flex-1 f-min-title" :placeholder="rule[0].errorMsg" v-model="params.phone"/>
			</view>
			<view class="fp-item pl-lg pr-lg fill-body radius-16 flex-between mb-md">
				<text class="c-title f-min-title item-title">{{rule[1].regText}}</text>
				<view class="flex-1 flex-between">
					<input type="text" class="f-min-title flex-1" :placeholder="rule[1].errorMsg" v-model="params.code"/>
					<view class="f-min-title item-code" :style="{color:primaryColor}" @tap="getCode">{{authTime||'获取验证码'}}</view>
				</view>
			</view>
			<view class="fp-item pl-lg pr-lg fill-body radius-16 flex-between mb-md">
				<text class="c-title f-min-title item-title">{{rule[2].regText}}</text>
				<input type="text" maxlength="32" class="flex-1 f-min-title" :placeholder="rule[2].errorMsg" v-model="params.pwd"/>
			</view>
			<view class="fp-item pl-lg pr-lg fill-body radius-16 flex-between mb-md">
				<text class="c-title f-min-title item-title">再次输入</text>
				<input type="text" maxlength="16" class="flex-1 f-min-title" placeholder="请再次输入新密码" v-model="params.confirm_pwd"/>
			</view>
			<view class="pb-lg f-caption" style="color: #FF0000;">*密码由8-16位数字、字母或符号组成, 至少含2种以上字符</view>
		</view>
		<view class="a-btn c-base f-title text-center radius-16 mt-sm" :style="{backgroundColor:primaryColor}" @tap="toLogin">登录</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default{
		data(){
			return{
				authTime:0,
				timer:null,
				lockTap:false,
				params: {
					phone:'',
					code:'',
					pwd:'',
					confirm_pwd:''
				},
				rule: [{
						name: "phone",
						checkType: "isMobile",
						errorMsg: "请输入手机号",
						regText: "手机号"
					},
					{
						name: "code",
						checkType: "isNotNull",
						errorMsg: "请输入验证码",
						regText: "验证码"
					},
					{
						name: "pwd",
						checkType: "isNotNull",
						errorMsg: "请输入8-16位新密码",
						regText: "新密码"
					}
				],
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			location: state => state.user.location,
		}),
		methods:{
			//表单验证
			validate(param , rule) {
				let validate = new this.$util.Validate();
				rule.map(item => {
					let {
						name,
					} = item
					validate.add(param[name], item);
				})
				let message = validate.start();
				return message;
			},
			async getCode(){
				if(this.authTime)return
				let {phone} = this.params
				let param = this.$util.deepCopy(this.params)
				let rule = [this.$util.deepCopy(this.rule)[0]]
				let msg = this.validate(param , rule);
				
				if (msg) {
					this.$util.showToast({
						title: msg
					})
					return
				}
				let time = 180
				this.timer = setInterval(() => {
					if (time === 0) {
						clearTimeout(this.timer)
						return
					}
					time--
					this.authTime = time
				}, 1000)
				await this.$api.login.sendShortMsg({
					phone
				})
			},
			async toLogin(){
				let param = this.$util.deepCopy(this.params)
				let rule = this.$util.deepCopy(this.rule)
				let msg = this.validate(param , rule);
				let pwdReg = /(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\W]{8,16}/
				if (msg) {
					this.$util.showToast({
						title: msg
					})
					return
				}
				if (param.pwd.length < 8) {
					return this.$util.showToast({
						title: '密码不能小于8位'
					})
				}
				if (!pwdReg.test(param.pwd)) {
					return this.$util.showToast({
						title: '请输入正确格式的密码'
					})
				}
				if (!param.confirm_pwd) {
					return this.$util.showToast({
						title: '请再次输入新密码'
					})
				}
				if (param.confirm_pwd.replace(/(^\s*)|(\s*$)/g, "") != param.pwd.replace(/(^\s*)|(\s*$)/g, "")) {
					return this.$util.showToast({
						title: '两次输入密码不一致'
					})
				}
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					await this.$api.login.forgetPwd(param)
					this.$util.hideAll()
					this.lockTap = false
					this.timer && clearTimeout(this.timer)
					this.$util.showToast({
						title: '修改成功'
					})
					setTimeout(() => {
						this.$util.goUrl({url:1 ,openType :'navigateBack'})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.fp-main{
		padding: 60rpx;
		.fp-list{
			padding-top: 50rpx;
			.fp-item{
				height: 110rpx;
				.item-title{
					min-width: 130rpx;
				}
				.item-code{
					width: 180rpx;
					text-align: right;
				}
			}
		}
		.a-btn{
			height: 110rpx;
			line-height: 110rpx;
		}
	}
</style>